import './Scss/SecurityTime.scss'
import { useState, useRef, useEffect } from 'react'
import { Http } from '../../../../Common/Api'
import { useSize, useRequest } from 'ahooks'
import { Column } from '@ant-design/plots'

export const SecurityTime001 = ({ title, api }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [dataTwo, setDataTwo] = useState([])
    const [ChartsTwo, setChartsTwo] = useState()
    useEffect(() => {
        if (size) {
            const { width, height } = size
            const configTwo = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data: dataTwo,
                isGroup: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                color: ['#B3FCFE', '#71A8FF'],
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetY: 24,
                    itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                },

                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: { text: '数量', position: 'end', autoRotate: false, offset: 50, style: { fill: '#B2FBFD' } },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setChartsTwo(configTwo)
        }
    }, [size, dataTwo])

    const { runAsync: getSecurityGetSecurityByDate } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ securityDate, totalCount, handledCount }) => {
                data = [
                    ...data,
                    { name: '下单数', type: securityDate, value: totalCount },
                    { name: '已整改', type: securityDate, value: handledCount },
                ]
            })
            setDataTwo(data)
        },
    })

    useEffect(() => {
        getSecurityGetSecurityByDate({ url: 'getSecurityGetSecurityByDate', data: { Day: 10 } })
    }, [getSecurityGetSecurityByDate])
    return (
        <div className="SecurityTime001">
            <div className="TitleSmall">
                <div>{title || '按日期统计'} </div>
                <div />
            </div>
            <div className="Charts" ref={ChartsBox}>
                {ChartsTwo && <Column {...ChartsTwo} />}
            </div>
        </div>
    )
}
